<template>
	<div>
		<el-row class="ContentTable" :gutter="20">
			<el-col :span="24">
				<el-input placeholder="指标值" v-model="filterText" style="display:none">
				</el-input>
				<el-tree v-if="treeData.length > 0" 
					@current-change="checkChange" 
					:data="treeData" 
					:check-strictly="true" 
					default-expand-all 
					node-key="id" 
					ref="tree" 
					:highlight-current="true" 
					:props="treeProps" 
					:expand-on-click-node="false" 
					:current-node-key="currentKey" 
					:filter-node-method="filterNode">
				</el-tree>
			</el-col>
		</el-row>
		<!--         <el-row class="ButtomBtn">
            <el-col :span="24"> -->
		<div>
			<el-button style="width:120px" type="primary" @click="OnSubmit">保存</el-button>
			<el-button style="width:120px" @click="Hiden(2)">取消</el-button>
		</div>
		<!-- </el-col> -->
		<!-- </el-row> -->
	</div>
</template>
<script>
	export default {
		mounted() {},
		components: {
		},
		props: ['staff'],
		data() {
			return {
				treeData: [],
				treeProps: {
					children: 'children',
					label: 'name'
				},
				queryInfo: {
					current: 1,
					size: 200,
					keyword: ''
				},
				treeIds: [],
				filterText: '',
				saveData: [], //保存的数据
				currentKey: '', //当前高亮显示选中的key

			};

		},
		methods: {
			Refresh() {
				this.ajax({
					url: 'tSysOrganization/getOrgs',
					data: this.queryInfo,
				}).then(data => {
					this.treeIds = [];
					this.HandleTreeGrid(data, this.treeIds);
					this.treeData = data;
					this.GetStaffOrg();
				})
			},
			HandleTreeGrid(treeNode, tableData) {
				for(var item of treeNode) {
					tableData.push(item.id);
					if(item.hasChild && item.children.length > 0) {
						this.HandleTreeGrid(item.children, tableData);
					}
				}
			},
			OnSubmit() {
				// let nodes = this.$refs.tree.getCheckedNodes();
				// let data = [];
				// nodes.forEach((item) => { //拼接数据结构
				//     data.push({
				//         organizationId: item.id,
				//         staffId: this.staff.id,
				//         organizationName: item.text
				//     });
				// });
//				console.log(this.saveData)
//				return ;
				this.ajax({
					url: 'tSysUserOrg/confUserOrg',
					type: 'post',
					data: this.saveData,
					success: function(data) {
						this.Hiden(1);
					}
				});
			},
			SetSelectNode(keys) { //根据人员组织关联数据动态设置勾选状态
				this.treeIds.forEach((item) => { //清空勾选
					this.$refs.tree.setChecked(item, false, false);
				});
				this.$refs.tree.setCheckedKeys(keys); //特定数据勾选
			},
			Hiden(type) { //type:1,保存，2，取消
				this.$emit('Show', false);
				if(type == 1) {
					this.$emit("Refresh");
				}
			},
			ClearData() {
				this.filterText = "";
			},
			GetStaffOrg() { //获取人员组织关联信息
				this.ajax({
					url: 'tSysUser/selectUserOrg?id=' + this.staff.id,
					// success: function(data) {
					//     //this.SetSelectNode(data);
					// }
				}).then(data => {
					this.currentKey = data[0]

					this.saveData = {
						oId: this.currentKey,
						uId: this.staff.id
					}
				})
			},
			filterNode(value, data) {
				if(!value) return true;
				return data.text.indexOf(value) !== -1;
			},
			/*节点选中状态发生变化是的回调*/
			checkChange(item) {
				this.saveData={
					oId: item.id,
					uId: this.staff.id
				}
			}
		},
		watch: {
			filterText: function(newVal) {
				this.$refs.tree.filter(newVal);
			}
		},
		created() {
			this.Refresh();
		}

	}
</script>
<style scoped>
	.ContentTable {
		width: 1000px;
		height: 500px
	}
	
	.ButtomBtn {
		width: 1000px;
		height: 40px;
		text-align: right;
	}
	
	.el-tree {
		height: 480px;
		overflow: overlay;
	}
</style>